import { useState } from "react"
import SyntaxHighlighter from "@/components/SyntaxHighlighter"

const code = `
  import React, { useState } from 'react'

  function ControlledComponent() {
    const [value, setValue] = useState('')

    const handleChange = (e) => {
      setValue(e.target.value) // 受控组件中如果不这样设置，无法在输入框中看到输入的数据，也无法改变
    }

    return (
      <input value={value} onChange={handleChange} />
    )
  }
`

function Controlled() {
  const [value, setValue] = useState('')

  const handleChange = (e) => {
    setValue(e.target.value)
  }

  return (
    <div>
      <input value={value} onChange={handleChange} />

      <SyntaxHighlighter children={code} />
    </div>
  )
}

export default Controlled